<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>我的请假</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/my_leave.css">
	<link rel="stylesheet" href="../css/main.css">
</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">我的请假</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
			</div>
			<div class="header2" style="position: fixed;top: 40px;">
				<div :class="{header_user:state==0}" @click="state=0">请假申请</div>
				<div :class="{header_user:state==1}" @click="state=1">申请记录</div>
			</div>
			<div style="height:70px;"></div>
			<div class="content" v-if="state==0">
				<select class="user_name" v-model="leave.type">
					<option :value="undefined" disabled="disabled">请选择请假类别</option>
					<option :value="0">事假</option>
					<option :value="1">病假</option>
					<option :value="2">其他</option>
				</select>
				<input class="user_name" placeholder="请输入开始时间" v-model="leave.startTime" id="start_time" />
				<input class="user_name" placeholder="请输入结束时间" v-model="leave.endTime" id="end_time" />
				<textarea class="user_name info-textarea" placeholder="请输入具体事由" v-model="leave.reason"></textarea>
				<div class="offer" @click="submit">提交申请</div>
			</div>

			<div class="content2" v-if="state==1">
				<div class="list" v-for="item in list" :key="item.id">
					<div class="result2" :style="style(item.status)" v-text="['审核','通过','驳回'][item.status]"></div>

					<div class="list_content">
						<p>
							<span>类别 :</span>
							<span v-text="{0:'事假',1:'病假',2:'其他'}[item.type]"></span>
						</p>
						<p>
							<span> 时间 :</span>
							<span v-text="format(item.startTime)"></span>
							<span>至</span>
							<span v-text="format(item.endTime)"></span>
						</p>
						<p>
							<span>事由 :</span>
							<span v-text="item.reason"></span>
						</p>
						<p v-if="item.remark">
							<span>驳回原因 :</span>
							<span v-text="item.remark"></span>
						</p>
					</div>

				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/rolldate.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				state: 0,
				leave: {},
				list: []
			},
			created: function () {
				if (location.hash == '#record') this.state = 1;
			},
			methods: {
				submit: function () {
					var leave = this.leave;
					if (leave.type === undefined || !leave.startTime || !leave.endTime || !leave.reason) {
						alert('请填写完整');
						return;
					}
					if (leave.startTime >= leave.endTime) {
						alert('结束时间应晚于开始时间');
						return;
					}
					if (!confirm('确认提交？')) return;

					axios.post('/s/leave', leave).then(function (res) {
						this.state = 1;
						this.leave = {};
					}.bind(this));
				},
				getList: function () {
					axios.get('/s/leave').then(function (res) {
						this.list = res.data;
					}.bind(this));
				},
				format: function (time) {
					if (!time) return '';
					return dayjs(time).format('YYYY-MM-DD HH:mm');
				},
				img: function (status) {
					var prefix = '/wechat/image/';
					if (status == 0) return prefix + 'leave_to_audit.svg';
					if (status == 1) return prefix + 'leave_agree.svg';
					if (status == 2) return prefix + 'leave_reject.svg';
				},
				style: function (status) {
					var color = ['yellow', 'green', 'red'][status];
					return {
						color: color,
						'border-color': color
					};
				}
			},
			watch: {
				state: function (newValue, oldValue) {
					if (newValue == 1) this.getList();
				}
			}
		});


		var year = new Date().getFullYear();

		new Rolldate({
			el: '#start_time',
			format: 'YYYY-MM-DD hh:mm',
			beginYear: year,
			endYear: year + 1,
			confirm: function (date) {
				app.leave.startTime = date;
			}
		});

		new Rolldate({
			el: '#end_time',
			format: 'YYYY-MM-DD hh:mm',
			beginYear: year,
			endYear: year + 1,
			confirm: function (date) {
				app.leave.endTime = date;
			}
		});

	</script>

</body>

</html>